<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>商家列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
	<script type="text/jscript" th:src="@{/plugin/jquery/jquery.min.js}"></script>
</head>
<body>
	<div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">	
	<form class="layui-form" id="book" method="post" lay-filter="example">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名</label>
	    <div class="layui-input-block">
	      <input type="text" id="good_name" name="good_name"  lay-verify="title" autocomplete="off" placeholder="请输入商品名" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品单价</label>
	    <div class="layui-input-block">
	      <input type="text" id="unit_price" name="unit_price" lay-verify="title" autocomplete="off" placeholder="请输入商品单价" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品库存</label>
	    <div class="layui-input-block">
	      <input type="text" id="good_stock" name="good_stock" lay-verify="title" autocomplete="off" placeholder="请输入商品库存" class="layui-input">
	    </div>
	  </div>
	  
	 
	 <!--  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
	    </div>
	  </div> -->
	</form>
</div>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<script id="toolbarDemo" type="text/html">
 	 <div class="layui-btn-container">
    	<button class="layui-btn layui-btn-sm" lay-event="add">新建商品</button>
 	 </div>
	</script>
	<script type="text/html" id="barDemo" >
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	<script type="text/javascript"  th:inline="none">
	layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element','form'], function(){
		  var laydate = layui.laydate //日期
		  ,laypage = layui.laypage //分页
		  ,layer = layui.layer //弹层
		  ,table = layui.table //表格
		  ,upload = layui.upload //上传
		  ,element = layui.element //元素操作
		  ,form = layui.form
		  ,$=layui.$;
		  
		  //监听Tab切换
		  element.on('tab(demo)', function(data){
		    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
		      tips: 1
		    });
		  });
		  
	//table
	 table.render({
		    elem: '#demo'
		    ,height: 420
		    ,url: 'selectAll' //数据接口
		    ,title: '用户表'
		    ,height : 'full-75'
		    ,page: true //开启分页
		    ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field: 'good_id', title: '序号', width:100, sort: true, fixed: 'left'}
		      ,{field: 'good_name', title: '商品名字', width:400}
		      ,{field: 'unit_price', title: '单价', width: 500, sort: true}
		      ,{field: 'good_stock', title: '库存', width:100, sort: true}
		      ,{fixed: 'right', width: 400, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		layui.use('table', function() {
			var table = layui.table;

		});
		
		 //监听头工具栏事件
		  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id)
		    ,data = checkStatus.data; //获取选中的数据
		    switch(obj.event){
		      case 'add':
		        layer.open({
		        	type: 1 
		               ,title: ['新增商品']
		               ,btn: ['确定', '取消'] 
		               ,shadeClose: true
		               ,shade: 0 
		               ,maxmin: true 
		               ,content: $("#window")
		               ,yes:function(index,layero){
		            	   $.getJSON("/store/good/insert",{
		            		   store_id: data.store_id,
		            		   good_name: $('#good_name').val(),
		            		   unit_price: $('#unit_price').val(),
		            		   good_stock: $('#good_stock').val()
		            	   },function(data){
		            		  if(data.code==0){
		            			  alert(data.msg);
		            			  layer.close(index);
		            			  location.reload();
		            		  }else{
		            			  alert(data.msg);
		            		  }
		            	   })
		               }
		        });
		      break;
		      case 'update':
		        if(data.length === 0){
		          layer.msg('请选择一行');
		        } else if(data.length > 1){
		          layer.msg('只能同时编辑一个');
		        } else {
		          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
		        }
		      break;
		      case 'delete':
		        if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		          layer.msg('删除');
		        }
		      break;
		    };
		  });
		  
		  //监听行工具事件
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		   	if(layEvent === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del(); //删除对应行（tr）的DOM结构
		        layer.close(index);
		        //向服务端发送删除指令
		        $.getJSON("/store/good/deleteGood",{
		        	good_id: data.good_id
		        },function(data){
		        	if(data.code==0){
		        		layer.alert(data.msg)
		        	}else{
		        		layer.alert(data.msg)
		        	}
		        })
		      });
		    } else if(layEvent === 'edit'){
		    	layer.open({
		        	type: 1 
		               ,title: ['修改信息']
		               ,btn: ['确定', '取消'] 
		               ,shadeClose: true
		               ,shade: 0 
		               ,maxmin: true 
		               ,content: $("#window")
		               ,success:function(layero,index){
			                 $('#good_name').val(data.good_name);
			                 $('#unit_price').val(data.unit_price); 
			                 $('#good_stock').val(data.good_stock);  
		               }
		               ,yes:function(index,layero){
		            	   $.getJSON("/store/good/updateGood",{
		            		   good_id: data.good_id,
		            		   good_name: $('#good_name').val(),
		            		   unit_price: $('#unit_price').val(),
		            		   good_stock: $('#good_stock').val()
		            	   },function(data){
		            		  if(data.code==0){
		            			  layer.alert(data.msg);
		            			  layer.close(index);
		            			  location.reload();
		            		  }else{
		            			  layer.alert(data.msg);
		            		  }
		            	   })
		               }
		        });
		    }
		  });
	});
	</script>
</body>
</html>